<template>
  <a-form :model="form" label-align="left" :ref="formRef">
    <div v-for="item in options"><!--:key="item.id"-->
      <component
        :is="FormItem"
        v-bind="reactive({ ...$attrs, ...props, ...item, item, props, form, disabled })"
      ></component>
    </div>
  </a-form>
</template>
<script lang="ts" setup name="Form">
import { reactive, ref } from "vue";
import FormItem from "./FormItem.vue";
interface Prop {
  options: Right.FormOptions[];
  disabled: boolean;
  form: { [x: string | number]: any };
  RightHooks: Right.RightHooks;
  formRef: any;
  handleChange: (
    value:
      | string
      | number
      | boolean
      | (string | number | boolean)[]
      | Record<string, any>
      | (
          | string
          | number
          | Record<string, any>
          | (string | number | Record<string, any>)[]
        )[]
      | undefined,
    item: Right.FormOptions
  ) => void;
}
const props = defineProps<Prop>();
// const formRef = ref();
</script>
<style lang="less" scoped>
@import url("../index.less");
</style>
